<template>
	<view class="app-container">
		<view class="header-box" style="background: #FFE6D1;" :style="{paddingTop: `${safeArea.top}px`}">
			<view class="header-box-container" style="justify-content: center;">
				<uni-icons type="back" size="24" style="position: absolute;left: 0rpx;" @tap="back"></uni-icons>
				<view class="header-title" style="color: #000;" >
				{{title}}</view>
			</view>
		</view>
		<view class="page_bg" :style="{height:`calc(488rpx - ${safeArea.top}px)`}"></view>
		<view class="home-body-box" :style="{paddingTop: `${safeArea.top}px`}">
			<navigator class="inputp" url="" hover-class="none-hover" @click="gouSearch">
				<view class="input-tips">请输入商品</view>
				<uni-icons type="search" size="18" color="#CA8248" style="font-weight: bold;"></uni-icons>
			</navigator>


			<view class="" style="margin-top: 10rpx; ">
				<view style="width:auto;color: #999999;">
					<view v-for="(item, indexList) in categoryList" :key="indexList" @click="toSubjectList(item)"
						style="display: inline-block;margin:16rpx;font-weight: bold;">							<!-- <u-icon :name="item.icon" :size="100" imgMode="aspectFill"></u-icon> -->
							<text class="grid-text">{{ item.name }}</text>
					</view>
				</view>
			</view>


			<view class="goods-list">
				<view v-for="(item, index) in skuList" :key="index" class="goods-item" @click="goShopInfoPage(item)">
					<image :src="item.skuImg" mode="aspectFill" class="sku-img"></image>
					<view class="title">{{ item.skuTitle }}</view>
					<view v-if="item.isActivity == '1'"
						style="display: flex;flex-direction: row; padding-left: 20rpx; margin-top: 5rpx;">
						<view style="text-decoration:line-through; font-size: 28rpx; color: darkgray;">
							{{item.linePrice}}
						</view>
						<view
							style=" border-radius: 5rpx; margin-left: auto; margin-right: 5rpx; height: 36rpx;font-size: 20rpx; padding: 2rpx 10rpx; background: #FF3333; color: #FFFFFF;">
							促销
						</view>
					</view>
					<view class="price-item">
						<view class="price-box">￥{{ item.skuPrice.toFixed(2) }}</view>
						<image src="../../../static/image/cart-z.png" mode="aspectFit" class="cart-icon"></image>
					</view>
					<!-- <view class="icon-image">
						{{item.skuType == 1?'商品':(item.skuType == 2 && item.skuServiceType == 2?'配送':'到店')}}
					</view> -->
				</view>
			</view>
			<view v-if="finished" class="no-more-tip">没有更多了</view>
		</view>
	</view>

</template>
<script>
	import dragButton from "@/components/drag-button/drag-button.vue";
	export default {
		components: {
			dragButton
		},
		data() {
			return {
				appName: 'OJ原聚酒小二',
				colData: 4,
				navBg: {
					background: "rgba(235, 233, 255, 0.0)"
				},
				queryParam: {
					spuAddType: 0,
					search: null,
					pageNum: 1
				},
				imgList: [],
				categoryList: [],
				skuList: [],
				// 商品查询完成
				finished: false,
				returnStatus: false,
				showHeight: 'heightOne',
				shopLocationH: 'shop-list-one',
				isDelShow: false, //判断是否出现删除标志
				safeArea: {},
				hotSaleSku: {}, // 热销商品
				homeClickedCategory: {} ,// 当前一级目录
				title:''
			};
		},
		onLoad() {
			this.homeClickedCategory = uni.getStorageSync('homeClickedCategory');
			const level2Categorys = this.homeClickedCategory.children;
			this.title = this.homeClickedCategory.name
			const that = this
			// 商品列表
			 this.getSkuList();
			this.categoryList = level2Categorys
			this.safeArea = uni.getSystemInfoSync().safeArea

			this.showHeight = level2Categorys[0].length > 5 ? 'heightTwo' : 'heightOne'


		},
		onShow() {

		},
		// 拉到底部 触发加载新一页商品
		onReachBottom() {
			if (!this.finished) {
				this.queryParam.pageNum++;
				this.getSkuList();
			} else {
				this.$u.toast("没有更多了...");
			}
		},
		onPullDownRefresh() {

		},
		methods: {
			back(){
				uni.navigateBack()
			},

			// 跳转到搜索页面
			gouSearch() {
				uni.switchTab({
					url: '/pages/sys/home/allProduct'
				})
			},
			// 清除输入框
			clearSearch() {
				this.queryParam.search = null,
					this.isDelShow = false;
			},
			//监听输入
			inputChange(event) {
				//判断输入框是否有值输入，决定是否出现删除符号
				if (this.queryParam.search.length > 0) {
					console.log(this.queryParam.search.length)
					this.isDelShow = true;
					console.log("大过零")
				} else {
					this.isDelShow = false;
					console.log("不大于零")
				}
			},
			// VIP 会员专区
			meridianPoint() {
				const that = this
				try {
					if (uni.getStorageSync('userInfo').id) {
						uni.navigateTo({
							url: '/pagesB/vip/select/index',
						})

					} else {
						uni.navigateTo({
							url: '/pages/sys/common/login'
						})
					}
				} catch (err) {
					uni.navigateTo({
						url: '/pages/sys/common/login'
					})
				}
			},

			//进入商品购物页面
			goShopInfoPage(item) {
				uni.navigateTo({
					url: '/pages/sys/home/product?id=' + item.skuId
				})

			},
			toSearch() {
				uni.navigateTo({
					url: "/pages/sys/common/lastpage"
				})
			},
			/** 获取商品列表 */
			getSkuList() {
				let that = this;
				that.$api.request.getClassIdBySkuInfo({
					classId: that.homeClickedCategory.id,
					sqType: 0,
					sortValue: 0,
					wechatId: uni.getStorageSync('openId')
				}, res => {
					if (res.code == 200) {
						if (that.queryParam.pageNum > 1) {
							res.data.forEach(item => that.skuList.push(item));
						} else {
							that.skuList = res.data;
						}
						//把本页商品列表设置到缓存，供第三级筛选

						uni.setStorageSync('level2Products', res.data);
						that.finished = true;
					}
				})

			},
			// 跳转专题商品列表
			toSubjectList(item) {
				const that = this;
				uni.navigateTo({
					url: "/pages/sys/common/lastpage",
					success: res => {
						res.eventChannel.emit('item', item)
					}
				})

			},
			/** 查询 */
			searchSkuList() {
				this.queryParam.pageNum = 1;
				this.getSkuList();
			},
			/** 跳转 */
			navTo(url) {
				if (uni.getStorageSync('authStatus') == true) {
					uni.navigateTo({
						url: url
					})
				} else {
					const that = this
					uni.getUserProfile({
						desc: "获取你的昵称、头像、地区及性别",
						success: (res) => {
							console.log(res);
							uni.showLoading({
								//title: '加载中'
							});
							this.$api.request.userLoginOrAdd({
								encryptedData: res.encryptedData,
								iv: res.iv,
								sessionKey: this.session_key,
								wechatId: uni.getStorageSync('openId'),
								sourceType: "APP",
								nickName: res.userInfo.nickName,
								avatarUrl: res.userInfo.avatarUrl
							}, resp => {
								console.log(resp);
								uni.hideLoading();
								if (resp.code == 200) {
									this.$store.commit("setToken", resp.data.tokenValue)
									this.$store.commit("login", resp.data);
									uni.setStorageSync('authStatus', true)
									this.$api.request.userInfo({}, res => {
										if (res.code == 200) {
											uni.setStorageSync('userInfo', res.data)
											setTimeout(() => {
												uni.navigateTo({
													url
												})
											}, 500)

										}
									})

								}
							})
						}
					})
				}
			},
			/** 返回第一层 */
			resetData() {
				delete this.queryParam.skuType
				this.getSubjectList()
				this.getSkuList()
			}
		}
	};
</script>
<style lang="scss" scoped>
	.app-container {
		width: 100vw;
		position: relative;

		.page_bg {
			background: linear-gradient(360deg, #FFFFFF 0%, rgba(255, 226, 202, 0.29) 41%, #FFE2CA 100%);
			height: 488rpx;
			// height: 750rpx;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
		}

		.top-bar-left {
			display: flex;
			height: 42rpx;
			margin-left: 20rpx;
		}

		.mid-swiper {
			// margin: 32rpx 23rpx 5rpx;
			width: 704rpx;
			height: 280rpx;
		}

		.btn-card {
			width: calc(100% - 46rpx);
			margin: 0 23rpx;
			border-radius: 10rpx;
			background-color: #FFFFFF;
			// box-shadow: 0rpx 0rpx 4rpx 3rpx #DDDDDD;

			.grid-image {
				width: 71rpx;
				height: 71rpx;
			}

			.grid-text {
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #111111;
				line-height: 20px;
				margin-top: 10rpx;
			}
		}

		.guess-like {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin: 30rpx 23rpx 0;
			margin-top: 50rpx;
		}

		.water-fall-box {
			margin: 0 23rpx;
		}

		/* 商品列表 */
		.goods-list {
			display: flex;
			flex-wrap: wrap;
			align-items: stretch;
			// column-count: 2;
			// column-gap: normal;
			padding: 20rpx 23rpx;
			margin-top: 10rpx;

			.goods-item {
				width: 49%;
				break-inside: avoid;
				// width: 100%;
				height: 100%;
				display: flex;
				border-radius: 20rpx;
				margin-bottom: 30rpx;
				padding-bottom: 20rpx;
				// padding: 0 10rpx 10rpx;
				flex-direction: column;
				background: #FFFFFF;
				box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
				// position: relative;

				&:nth-child(2n+1) {
					margin-right: 2%;
				}

				.sku-img {
					width: 340rpx;
					height: 340rpx;
					min-height: 300rpx;
					border-top-left-radius: 20rpx;
					border-top-right-radius: 20rpx;
				}

				.title {
					color: #111111;
					font-weight: bold;
					margin: 0 20rpx;
					font-size: 28rpx;
					line-height: 30rpx;
					margin-top: 16rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.sub-title {
					color: #9B9B9B;
					font-size: 22rpx;
					overflow: hidden;
					margin: 0 20rpx;
					margin-top: 10rpx;
					line-height: 26rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.price-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 16rpx 20rpx 0;
				}

				.price-box {
					color: #CA8248;
					font-size: 28rpx;
					line-height: 30rpx;
					font-weight: bold;
				}

				.cart-icon {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		.no-more-tip {
			width: 100%;
			height: 24rpx;
			color: #B7B7B7;
			text-align: center;
			margin-bottom: 75rpx;
		}
	}

	.shop-list-row-x {
		width: auto;
		margin: 0 24rpx;
		margin-top: 25rpx;
		display: flex;
		flex-direction: row;
		overflow-y: scroll;

		.shop-date-box {
			width: 220rpx;
			display: flex;
			flex-direction: column;
			margin-right: 20rpx;

			.shop-name-box {
				width: 220rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				height: 21px;
				font-size: 15px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #111111;
				line-height: 21px;
				margin-top: 10rpx;
			}

			.location-box-row {
				width: 220rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 6rpx;

				.kilometre-text {
					height: 18px;
					font-size: 13px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 18px;
					margin-left: 5rpx;
				}
			}

		}

	}

	.home-body-box {
		width: 100vw;
		height: auto;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		// background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 12%, #F5F6F7 100%);
		z-index: 3;
		position: relative;
		top: 80rpx;
		left: 0;

		.ad-box {
			display: flex;
			align-items: center;
			padding: 8rpx 15rpx 8rpx 30rpx;
			border-radius: 36rpx;
			background: #F7F8FA;
			margin: 15rpx 24rpx 0;

			.notice-icon {
				width: 64rpx;
				height: 30rpx;
				margin-right: 22rpx;
			}

			.notice-container {
				flex: 1;
				overflow: hidden;
				position: relative;

				&:before {
					content: "";
					position: absolute;
					margin: auto;
					height: 30rpx;
					left: 0;
					top: 0;
					bottom: 0;
					width: 2rpx;
					background: #EBECF0;
				}
			}

			::v-deep .uni-noticebar {
				margin-bottom: 0;
				border-radius: 36rpx;
			}

			::v-deep .uni-noticebar-icon {
				margin-top: -5rpx;
			}
		}
	}

	.return-text {
		color: #000000;
		margin-left: 30rpx;
		padding-top: 90rpx;
		margin-bottom: 30rpx;
	}

	.heightOne {
		height: 170rpx !important;
	}

	.heightTwo {
		height: 360rpx !important;
	}

	.shop-list {
		width: auto;
		height: 30vh;
		overflow-y: scroll;
		margin-top: 20rpx;
		padding: 20rpx 20rpx;
	}

	.shop-list-one {
		width: auto;
		height: auto;
		margin-top: 20rpx;
		padding: 20rpx 20rpx;
		background: #FFFFFF;
	}

	.title-project-body-title {
		display: flex;
		flex-direction: row;
		background: #FFFFFF;
		// border-radius: 10rpx;
		// box-shadow: 2rpx 0rpx 4rpx 3rpx #c4c6c9;
		padding-bottom: 20rpx;
		margin-top: 30rpx;
	}

	.order-info-text {
		width: calc(100vw - 360rpx);
		display: flex;
		flex-direction: column;
	}

	.card-money-box {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		margin-left: auto;
		margin-right: 20rpx;
		justify-content: center;
		align-items: center;
	}

	.total-amount-box {
		width: auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		font-size: 28rpx;
		font-weight: 500;
		margin-right: 20rpx;
	}

	.goods-column {
		margin: 20rpx 24rpx 0;

		.goods-card {
			border-radius: 16rpx;
			height: 400rpx;
			position: relative;
			overflow: hidden;
			margin-top: 30rpx;

			.thumb {
				height: 100%;
				width: 100%;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
			}

			.goods-title {
				position: absolute;
				height: 40rpx;
				line-height: 40rpx;
				bottom: 10rpx;
				left: 10rpx;
				right: 10rpx;
				font-size: 28rpx;
				color: #fff;
				z-index: 2;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}

			.card-icon {
				position: absolute;
				z-index: 2;
				width: 160rpx;
				height: 160rpx;
				top: 10rpx;
				right: 10rpx;
			}
		}
	}

	.special-title {
		font-size: 32rpx;
		position: relative;
		font-family: 'DOUYU';
		font-style: italic;
		font-weight: bold;
		text-align: center;
		color: #111111;

		.green-title {
			color: #CA8248;
		}

		&:before {
			content: "";
			width: 70rpx;
			height: 2rpx;
			background: #D2D2D2;
			position: absolute;
			left: 28%;
			top: 50%;
		}

		&:after {
			content: "";
			width: 70rpx;
			height: 2rpx;
			background: #D2D2D2;
			position: absolute;
			right: 28%;
			top: 50%;
		}
	}

	.bottom-home-box {
		width: auto;
		height: 120rpx;
		margin: 0 26rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 40rpx;
	}

	.service-type-box {
		height: 120rpx;
		display: flex;
		flex-direction: row;
		flex-grow: 1;
		justify-content: center;
		align-items: center;
		background: #FFFFFF;
		color: #000000;
		border: 1rpx solid #DDDDDD;
		border-radius: 10rpx;
	}

	.text-show {
		width: auto;
		height: 120rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.icon-image {
		width: 80rpx;
		height: 40rpx;
		background: #4CA775;
		border-radius: 2px;
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 40rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 10rpx;
		left: 10rpx;
		// background: #D2B48C;
		// border-top-left-radius: 10rpx;
		// border-bottom-right-radius: 15rpx;
	}

	.right-show-allshop {
		margin-left: auto;
		margin-right: 10rpx;
		font-size: 15px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 400;
		color: #444444;
		line-height: 21px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.u-swiper-wrap ::before {
		border-radius: 10rpx !important;
	}

	.inputp {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 50rpx;
		background: #fff;
		padding: 14rpx 24rpx;
		margin: 16rpx 24rpx 0;

		.input-tips {
			font-size: 26rpx;
			color: #999;
		}

		.inputs {
			background: #F2F2F2;
			border-radius: 36rpx;
			position: relative;
			display: flex;
			align-items: center;
			// background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 12%, #F5F6F7 100%) !important;
			background: linear-gradient(180deg, #FFFFFF 100%, #FFFFFF 100%, #FFFFFF 100%) !important;
			border: 1px solid rgba(76, 167, 117, 1);

			.scaninput {
				width: 500rpx;
				height: 60rpx;
				padding-left: 10rpx;
				display: flex;
				align-items: center;
				//background-color: #007AFF;
			}

			.searchimg {
				width: 1em;
				height: 1em;
				position: absolute;
				//top: 25upx;
				left: 20upx;
			}

			.scanimg {
				width: 1em;
				height: 1em;
				position: absolute;
				//top: 25upx;
				right: 36rpx;
			}

			.searchbtn {
				position: absolute;
				//right: 20upx;
				//top: 15upx;
				// border-radius: 5upx;
				//margin-right: -250rpx;
				background-color: rgba(76, 167, 117, 1);
				color: #fff;
				width: 4em;
				line-height: 2em;
				text-align: center;
				font-size: 0.8em;

			}

			.scan_weizhi {
				display: flex;
				justify-content: flex-end;
				height: 65rpx;
				position: relative;
				right: -6rpx;

				.scan_btn {
					width: 140rpx;
					height: 68rpx;
					color: #FFF;
					background: linear-gradient(145deg, #33CA7C 0%, #48EB9C 100%);
					border-radius: 40rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					margin-right: -2rpx;
					margin-top: -2rpx;
				}
			}

		}
	}

	.header-box {
		position: fixed;
		z-index: 10;
		top: 0;
		left: 0;
		right: 0;
		padding-left: 24rpx;
		background: #FC5F5C;

		.header-box-container {
			height: 76rpx;
			display: flex;
			align-items: center;

			.logo {
				width: 48rpx;
				height: 48rpx;
				margin-right: 12rpx;
				border-radius: 100%;
			}

			.header-title {
				font-size: 32rpx;
				margin-left: 12rpx;
				color: #fff;
			}
		}
	}
</style>
